<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="4">
        <el-card class="card">
          <template #header>
            <div class="card-header">
              <div>
                <svg-icon class="icon_size" icon="chart"></svg-icon>
              </div>
              <span class="header_info">机构分类树</span>
            </div>
          </template>
          <el-tree
                  ref="treeRef"
                  :data="treeData"
                  :props="defaultProps"
                  default-expand-all
                  style="height: 100%"
                  node-key="id"
                  @node-click="initStaffListByMec"
          />
        </el-card>
      </el-col>

      <el-col :span="20">
        <el-card class="card">
          <el-row :gutter="20" class="header">
            <el-col :span="5">
              <el-input placeholder="请输入员工昵称..." v-model="queryForm.query" clearable @clear="showAll"></el-input>
            </el-col>
            <el-button type="primary" :icon="Search" @click="initStaffList">搜索</el-button>
            <el-button type="info" :icon="Setting" @click="showAll">重置</el-button>
          </el-row>
          <el-table :data="tableData"
                    border stripe
                    style="width: 100%"
                    :cell-style="{textAlign: 'center'}"
                    :header-cell-style="{textAlign: 'center'}"
          >
            <el-table-column prop="id" label="#" width="50"/>
            <el-table-column prop="name" label="姓名" width="150"/>
            <el-table-column prop="gender" label="性别" width="100"/>
            <el-table-column prop="number" label="工号"/>
            <el-table-column prop="mechanism" label="机构" :formatter="mechanismFormatter"/>
            <el-table-column prop="phonenumber" label="联系电话"/>
          </el-table>
          <el-pagination
                  v-model:current-page="queryForm.pageNum"
                  v-model:page-size="queryForm.pageSize"
                  :page-sizes="[10,20,20,40,50]"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Search, Tools, Setting } from '@element-plus/icons-vue'
import request from "@/util/request";

/**
 * 查询条件
 */
const queryForm = ref({
  query: '',
  query2: '',
  pageNum: 1,
  pageSize: 10,
})

/**
 * 数据总数
 */
const total = ref(0);

/**
 * 表格数据初始化
 */
const tableData = ref([]);

/**
 * 初始化树节点数据
 */
const treeData = ref([])

/**
 * 树节点响应值
 */
const treeRef = ref(null)

/**
 * 树节点的属性
 */
const defaultProps = {
  label: "label",
  children: 'children',
}

/**
 * 异步等待获取员工数据
 */
const initStaffList = async () => {
  const res = await request.post("staff/list", queryForm.value);
  console.log(res)
  tableData.value = res.data.staffList;
  total.value = res.data.total;
}
initStaffList();

/**
 * 根据树节点对应的id获取获取对应的员工信息
 */
const initStaffListByMec = async (node) => {
  queryForm.value.query2 = node.id;
  console.log(queryForm.value.query2)
  const res = await request.post("staff/list", queryForm.value);
  console.log(res)
  tableData.value = res.data.staffList;
  total.value = res.data.total;
}

/**
 * 初始化树节点数据
 */
const initTreeList = async () => {
  const res = await request.get("mechanism/treeList");
  treeData.value = res.data.treeList;
}
initTreeList();

/**
 * 处理每页记录数变化
 */
const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  initStaffList();
}

/**
 * 处理第几页变化
 */
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum;
  initStaffList();
}

/**
 * 机构数组格式化
 */
const mechanismFormatter = (row, column) => {
  let mechanismName = []
  for (var i = 0; i < row.mechanism.length; i++) {
    mechanismName.push(row.mechanism[i].name)
  }
  return mechanismName.join()
}

/**
 * 重置显示全部数据
 */
const showAll = () => {
  queryForm.value.query = "";
  queryForm.value.query2 = "";
  initStaffList();
}
</script>

<style lang="scss" scoped>
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

::v-deep th.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 20px;
  font-size: 15px;
}

.el-tag--small {
  margin-left: 5px;
}

.card {
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.card-header {
  display: flex;
  align-items: center;
}

.icon_size {
  color: #565656;
}

.header_info {
  font-weight: bolder;
  font-size: 16px;
  margin-left: 5px;
}

.el-tree {
  padding: 0;
}
</style>